<template>
  <view class="customer-container">
    <view class="index-title">
      <view class="title1">您好~</view>
      <view class="title2">请问智能客服有什么可以帮到您呢？</view>
    </view>

    <!-- 便捷服务 -->
    <view class="service-container default-box-shadow">

      <view class="service-content">
        <view class="service-item" @click="handleConvenientQuestion(1)">
          <image
            class="service-icon"
            src="../../static/image/abnormal.png"
            mode="scaleToFill"
          />
          <view>账号异常说明</view>
        </view>

        <view class="service-item" @click="handleConvenientQuestion(2)">
          <image
            class="service-icon"
            src="../../static/image/malfunction.png"
            mode="scaleToFill"
          />
          <view>素材上传须知</view>
        </view>

        <view class="service-item" @click="handleConvenientQuestion(3)">
          <image
            class="service-icon"
            src="../../static/image/safe.png"
            mode="scaleToFill"
          />
          <view>提现规则说明</view>
        </view>
      </view>
    </view>
    
    <block v-if="questionList">
      <!-- 标题 -->
      <title title="更多问题" :custom-style="{
        'marginBottom': '24rpx',
        'marginTop': '40rpx',
        'fontSize': '36rpx',
        'fontWeight': '400',
      }"></title>

      <!-- 问题内容 -->
      <view class="question-container default-box-shadow">
        <u-cell-group
          :border="false">
          <u-cell-item
            v-for="(item, index) in questionList"
            :key="item.id"
            :border-bottom="(index + 1) === questionList.length ? false : true"
            :title="item.title"
            @click="handleSetQuestionDetail(item.title, item.content)">
          </u-cell-item>
        </u-cell-group>
      </view>
    </block>

    <view class="customer-block">
      <u-button :custom-style="{
          'backgroundColor': '#56d39d',
          'color': '#fff',
          'marginTop': '40rpx',
          'marginBottom': '20rpx',
        }"
        :ripple="true"
        open-type="contact"
        @click="setAlipayAccount">在线客服</u-button>
    </view>

  </view>
</template>

<script>
import { questionListByBusinessId } from '@/api/applet'
export default {
  data() {
    return {
      questionList: []
    }
  },
  onLoad() {
    this.getQuestionList();
  },
  methods: {
    // 获取问题
    getQuestionList() {
      questionListByBusinessId().then(result => {
        if (result && result.code === 200) {
          this.questionList = result.data;
        }
      })
    },

    // 前往
    async handleSetQuestionDetail(title, content) {
      await this.$store.dispatch('setQuestionDetail', {
        title,
        content
      })
      uni.navigateTo({
        url: '/pages/customer/questionDetail'
      })
    },

    // 便捷问题
    async handleConvenientQuestion(type) {
      uni.navigateTo({
        url: `/pages/customer/questionDetail?showType=${type}`
      })
    }
  }
}
</script>

<style lang="scss">
page{
  background-color: #f8f8f8;
}

.customer-container{
  padding: 0 24rpx 80rpx 24rpx;
}

.index-title{
  margin-bottom: 40rpx;

  .title1 {
    font-size: 48rpx;
    line-height: 100rpx;
  }

  .title1 {
    color: #1f1f1f;
    font-weight: 600;
  }

  .title2 {
    font-size: 24rpx;
    color: $uni-color-primary;
  }
}

.question-container{
  background-color: #fff;
  padding: 24rpx;
  border-radius: 8rpx;
}

.service-container{
  background-color: #fff;
  padding: 24rpx 0;
  border-radius: 8rpx;
  
  .service-content{
    display: flex;
    align-items: center;
    text-align: center;
  }

  .service-item{
    flex: 1;
  }

  .service-icon{
    width: 80rpx;
    height: 80rpx;
  }
}

.customer-block{

}

</style>

<style>
  .question-container .u-cell{
    padding: 16rpx 32rpx !important;
  }
</style>
